<template>
    <div class="question-container">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="110px">
            <el-form-item label="标题：" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="内容：" prop="question">
                <el-input type="textarea" v-model="ruleForm.question"></el-input>
            </el-form-item>
            <el-form-item label="农作物名称：" prop="plantName">
                <el-input type="textarea" v-model="ruleForm.plantName"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
                <el-input type="text" v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item style="float:right;">
                <el-button type="success" @click="submitForm(ruleFormRef)">去提问</el-button>
            </el-form-item>
        </el-form>
        <div style="margin: 0 auto; width: 100%;height:35px;line-height: 35px;display: flex;justify-self: start;">
            <el-button style="margin: 0 auto; width: 80px;height:35px;line-height: 35px;"
                @click="backHandle">
                <el-icon>
                    <Close />
                </el-icon>取 消
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import store from '@/store'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { addQuestion } from "@/api/order";
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 对象接口
interface RuleForm {
    title: string,
    question: string,
    plantName: string,
    phone: string,
    expertName: string,
    status: number
}

// 表单对象
const ruleFormRef = ref<FormInstance>()

// 规则
const ruleForm = reactive<RuleForm>({
    title: '',
    question: '',
    plantName: '',
    phone: '',
    expertName: '',
    status: 0,
})

// 表单尺寸
const formSize = ref<ComponentSize>('default')

// 表单验证规则
const rules = reactive<FormRules<RuleForm>>({
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
        }
    ],
    question: [
        {
            required: true,
            message: '请输入问题',
            trigger: 'blur'
        }
    ],
    plantName: [
        {
            required: true,
            message: '请输入农作物名称',
            trigger: 'blur'
        }
    ],
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
        }
    ],
})


// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ruleForm.expertName = route.query.id as string
            addQuestion(ruleForm).then(res => {
                if (res.flag) {
                    ElMessage({
                        message: res.message,
                        type: 'success',
                    })
                    router.push("/index/guide").catch((err) => err);
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'error',
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 返回
const backHandle = () => {
    router.back();
}

</script>

<style lang="scss" scoped>
.question-container {
    width: 1100px;
    height: 100%;
    margin: 10px auto;
    background: #fff;
    padding: 20px;
}
</style>